<template>
  <div class="home">
    <!-- 1.  -->
    <div class="header">
      <van-row>
        <van-col span="6">logo</van-col>
        <van-col span="14">
          <!-- left-icon='' 去掉左侧搜索图标
               right-icon='url' 右侧搜索图标

               插槽内容
               <template #right-icon>
                  <div>Q</div>
                </template>
          -->
          <van-search v-model="value" left-icon shape="round" placeholder="请输入搜索关键词">
            <template #right-icon>
              <div>Q</div>
            </template>
          </van-search>
        </van-col>
        <van-col span="4">登录</van-col>
      </van-row>
    </div>

    <!-- 2. 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <!-- 3. 导航 -->
    <van-grid :column-num="3">
      <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
    </van-grid>

    <!-- 4. 内容区域 -->
    <div class="list">
      <div class="th">
        <span class="text">推荐攻略</span>
      </div>
      <ul>
        <li v-for="ele in list" :key="ele.data.id">
          <div class="title">{{ele.data.title}}</div>
          <van-card
            num="2"
            :price="ele.data_source.pv"
            currency
            :title="ele.data.content"
            :thumb="ele.data.image"
          />
        </li>
      </ul>

     <div class="more">
        <a href="javascript:;" @click="getMore" v-if="isShow">点击加载更多</a>
        <a href="javascript:;" style="color:#999" v-else>我是有底线得</a>
     </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      arr: [{ id: "", text: "", url: "" }],
      list: [], //数据展示容器
      page:19,//请求得页码号
      isShow:false
    };
  },
  created() {
    this.getList(this.page);
  },
  methods: {
    //获取列表信息得地方---数据--拼接显示追加显示
    async getList(page) {
      let res = await this.$api.getList({ page });
      console.log(res.data);
      console.log(res.data.data.list);
      if(!res.data.show_more){//没有更多数据了--
      console.log('没有更多数据了--');
      this.isShow=false;
        return;
      }
      //老数据+新数据
      this.list = this.list.concat(res.data.data.list);
      this.isShow=true
    },
    //点击加载更多数据
    getMore(){
      this.page++;
      console.log('加载更多数据',this.page);
      this.getList(this.page)
    }
  }
};
</script>
<style scoped lang='less'>
.header {
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  height: 1rem;
  line-height: 1rem;
  position: relative;
  text-align: center;
  //  深层穿透样式
  /deep/.van-search {
    padding: 0.16rem 0;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.list {
  padding: 0.2rem;
  .th {
    span {
      font-family: PingFang SC;
      padding-left: 5px;
      border-left: #ffdb53 solid 3px;
      border-radius: 2px;
      font-size: 0.4rem;
      font-weight: 600;
      line-height: 0.6rem;
      background: #fff;
    }
  }
  ul{
    min-height: 6rem;
  }
  li {
    margin-top: 0.1rem;
    .title {
      font-size: 0.36rem;
      color: #333;
    }
    .van-card {
      background: #fff;
    }
    .van-multi-ellipsis--l2 {
      -webkit-line-clamp: 3;
      color: #666;
    }
    .van-card__title {
      max-height: none;
    }
  }
}

.more{
  text-align: center;
}
</style>